<template>
  <div>
    <div class="problemTag" :style="{ 'minHeight': $store.oj.systemParams.screenHeight * 0.09 + 'px' }">
      <div class="p-header" v-if="this.$route.name !== 'trainingCreate'">
        <div class="p-h-title"> <i class="iconfont icon-bianji"></i>标签管理</div>
      </div>
      <div class="p-btns">
        <n-button class="btn" size="small" type="success" @click="isShowAddModal">
          <i class="iconfont icon-tianjia"></i>添加标签分类
        </n-button>
      </div>
      <n-modal v-model:show="isShowAdd">
        <n-card :bordered="false" role="dialog" aria-modal="true" class="card"
          :style="{ 'height': $store.oj.getCardHeight, 'width': $store.oj.getCardWidth }">
          <div class="card-d" :style="{ 'height': $store.oj.getCardHeight, 'width': $store.oj.getCardWidth }">
            <h2 class="title">添加标签分类</h2>
            <div class="e-item">
              标签分类名称:
              <n-input class="n-select" size="small" placeholder="标签分类名称" v-model:value="tagCategory.name"></n-input>
            </div>
            <div class="e-item">
              标签分类排序:
              <n-input-number :min="1" :max="10000" class="n-select" size="small" placeholder="序号"
                v-model:value="tagCategory.rankCount"></n-input-number>
            </div>
            <div class="btndiv">
              <n-button class="btn" type="success" size="small" @click="appendTagCategory">添加</n-button>
            </div>
          </div>
        </n-card>
      </n-modal>
      <n-modal v-model:show="isShowEdit">
        <n-card :bordered="false" role="dialog" aria-modal="true" class="card"
          :style="{ 'height': $store.oj.getCardHeight, 'width': $store.oj.getCardWidth }">
          <div class="card-d" :style="{ 'height': $store.oj.getCardHeight, 'width': $store.oj.getCardWidth }">
            <h2 class="title">编辑标签分类</h2>
            <div class="e-item">
              标签分类名称:
              <n-input class="n-select" size="small" placeholder="标签分类名称" v-model:value="tagCategory.name"></n-input>
            </div>
            <div class="e-item">
              标签分类排序:
              <n-input-number :min="1" :max="10000" class="n-select" size="small" placeholder="序号"
                v-model:value="tagCategory.rankCount"></n-input-number>
            </div>
            <div class="btndiv">
              <n-button class="btn" type="success" size="small" @click="updateTagCategory">更新</n-button>
            </div>
          </div>
        </n-card>
      </n-modal>
    </div>
    <div class="problemTags">
      <div class="items" v-for="item in tagList" :key="item.id">
        <el-collapse v-model="activeNames" accordion>
          <el-collapse-item>
            <template #title>
              <div class="icon">
                <div style="max-width: 240px" class="icon-title">{{ item.name }}</div>
                <n-button class="btn" circle size="small" type="success" strong secondary
                  @click.native.stop="updateTagCategoryItem(item)"><i class="iconfont icon-bianji2 edit"></i></n-button>
                <n-button class="btn" circle size="small" type="error" strong secondary
                  @click.native.stop="delTagCategory(item.id)"><i class="iconfont icon-shanchu del"></i></n-button>
              </div>
            </template>
            <div class="categorys">
              <n-button class="btn" size="small" @click="appendTagModal(item.id)"><i class="iconfont icon-tianjia"></i>
                添加标签</n-button>
              <n-tag class="category" :color="{ borderColor: ele.color, textColor: ele.color }"
                v-for="ele in item.tagList" :key="ele.id" closable @close="delTag(ele.id)" @click="updateTagModal(ele)"
                size="small">
                {{ ele.name }}
              </n-tag>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <n-modal v-model:show="isShowAddTag">
      <n-card :bordered="false" role="dialog" aria-modal="true" class="card"
        :style="{ 'height': $store.oj.getCardHeight, 'width': $store.oj.getCardWidth }">
        <div class="card-d" :style="{ 'height': $store.oj.getCardHeight, 'width': $store.oj.getCardWidth }">
          <h2 class="title">添加标签</h2>
          <div class="e-item">
            标签名称:
            <n-input class="n-select" size="small" placeholder="标签名称" v-model:value="tag.name"></n-input>
          </div>
          <div class="e-item">
            标签颜色:
            <div class="colorPicker">
              <el-color-picker v-model="tag.color" />
            </div>
          </div>
          <div class="e-item">
            标签分类:
            <n-select class="n-select" size="small" placeholder="标签分类" v-model:value="tag.tcid" :options="tagList"
              label-field="name" value-field="id"></n-select>
          </div>
          <div class="btndiv">
            <n-button class="btn" type="success" size="small" @click="appendTag">添加</n-button>
          </div>
        </div>
      </n-card>
    </n-modal>
    <n-modal v-model:show="isShowEditTag">
      <n-card :bordered="false" role="dialog" aria-modal="true" class="card"
        :style="{ 'height': $store.oj.getCardHeight, 'width': $store.oj.getCardWidth }">
        <div class="card-d" :style="{ 'height': $store.oj.getCardHeight, 'width': $store.oj.getCardWidth }">
          <h2 class="title">添加标签</h2>
          <div class="e-item">
            标签名称:
            <n-input class="n-select" size="small" placeholder="标签名称" v-model:value="tag.name"></n-input>
          </div>
          <div class="e-item">
            标签颜色:
            <div class="colorPicker">
              <el-color-picker v-model="tag.color" />
            </div>
          </div>
          <div class="e-item">
            标签分类:
            <n-select class="n-select" size="small" placeholder="标签分类" v-model:value="tag.tcid" :options="tagList"
              label-field="name" value-field="id"></n-select>
          </div>
          <div class="btndiv">
            <n-button class="btn" type="success" size="small" @click="updateTag">更新</n-button>
          </div>
        </div>
      </n-card>
    </n-modal>
  </div>
</template>

<script>
import { getTagListAPI, appendTagCategoryAPI, delTagCategoryAPI, updateTagCategoryAPI, appendTagAPI, delTagAPI, updateTagAPI } from "@/api/adminAPI/adminAPI"
import { ElMessage } from 'element-plus'

export default {
  data () {
    return {
      tagList: [],
      isShowAdd: false,
      isShowEdit: false,
      isShowAddTag: false,
      isShowEditTag: false,
      tagCategory: {
        id: '',
        name: "",
        rankCount: 1
      },
      activeNames: '1',
      tag: {
        name: "",
        color: "", // 颜色
        tcid: "" // 必填,分类id
      }
    }
  },
  mounted () {
    this.getTagList()
  },
  methods: {
    //获取分类列表
    async getTagList () {
      await getTagListAPI().then((res) => {
        if (res.data.code === 200) {
          this.tagList = res.data.data
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    //添加分类
    async appendTagCategory () {
      if (this.tagCategory.name.length == 0) {
        ElMessage.error("输入分类名称")
        return
      }
      if (this.tagCategory.rankCount <= 0 || this.tagCategory.rankCount > 10000) {
        ElMessage.error("输入正确序号")
        return
      }
      await appendTagCategoryAPI(this.tagCategory).then((res) => {
        if (res.data.code === 200) {
          this.tagCategory = {
            id: '',
            name: "",
            rankCount: 1
          }
          this.getTagList()
          ElMessage.success(res.data.msg)
          this.isShowAdd = false
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    //删除分类
    async delTagCategory (id) {
      await delTagCategoryAPI([id]).then((res) => {
        if (res.data.code === 200) {
          this.getTagList()
          ElMessage.success(res.data.msg)
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    //更新modal
    updateTagCategoryItem (item) {
      this.tagCategory = item
      this.isShowEdit = true
    },
    //更新
    async updateTagCategory () {
      if (this.tagCategory.name.length == 0) {
        ElMessage.error("输入分类名称")
        return
      }
      if (this.tagCategory.rankCount <= 0 || this.tagCategory.rankCount > 10000) {
        ElMessage.error("输入正确序号")
        return
      }
      await updateTagCategoryAPI(this.tagCategory).then((res) => {
        if (res.data.code === 200) {
          this.getTagList()
          ElMessage.success(res.data.msg)
          this.isShowEdit = false
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    appendTagModal (id) {
      this.isShowAddTag = true
      this.tag = {
        name: "",
        color: "", // 颜色
        tcid: id // 必填,分类id
      }
    },
    //添加标签
    async appendTag () {
      if (this.tag.name.length === 0) {
        ElMessage.error("输入标签名称")
        return
      }
      if (this.tag.color.length === 0) {
        ElMessage.error("输入标签颜色")
        return
      }
      if (this.tag.tcid.length === 0) {
        ElMessage.error("输入所属分类")
        return
      }
      await appendTagAPI(this.tag).then((res) => {
        if (res.data.code === 200) {
          this.tag = {
            name: "",
            color: "",
            tcid: ""
          }
          this.getTagList()
          ElMessage.success(res.data.msg)
          this.isShowAddTag = false
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    //删除标签
    async delTag (id) {
      await delTagAPI([id]).then((res) => {
        if (res.data.code === 200) {
          this.getTagList()
          ElMessage.success(res.data.msg)
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    updateTagModal (ele) {
      this.tag = ele
      this.isShowEditTag = true
    },
    //更新标签
    async updateTag () {
      if (this.tag.name.length === 0) {
        ElMessage.error("输入标签名称")
        return
      }
      if (this.tag.color.length === 0) {
        ElMessage.error("输入标签颜色")
        return
      }
      if (this.tag.tcid.length === 0) {
        ElMessage.error("输入所属分类")
        return
      }
      await updateTagAPI(this.tag).then((res) => {
        if (res.data.code === 200) {
          this.getTagList()
          ElMessage.success(res.data.msg)
          this.isShowEditTag = false
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    isShowAddModal () {
      this.tagCategory = {
        id: '',
        name: "",
        rankCount: 1
      },
        this.isShowAdd = true
    }
  }
}
</script>

<style lang="less" scoped>
.problemTag {
  margin: auto;
  width: 96%;
  padding: 15px 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 12px 12px 50px #d9d9d9,
    -12px -12px 50px #ffffff;

  .p-header {
    display: flex;
    padding-bottom: 10px;
    border-bottom: 2px solid @lineColor;
    height: 60%;

    .p-h-title {
      height: 30px;
      line-height: 30px;
      font-size: 20px;
      font-weight: 600;
      color: #555;
      display: flex;
      text-align: center;

      .iconfont {
        margin: auto 0;
        font-weight: 700;
        font-size: 28px;
        height: 30px;
      }
    }
  }

  .p-btns {
    display: flex;
    height: 40%;

    .btn {
      margin: 10px 10px;
    }
  }
}

::v-deep(.el-collapse) {
  background-color: #fff;
  padding: 5px;
  box-shadow: 12px 12px 50px #d9d9d9,
    -12px -12px 50px #ffffff;
  padding: 10px 10px;
  border-radius: 10px;

}

.problemTags {
  margin: 20px auto 0 auto;
  width: 97%;
  display: flex;
  flex-wrap: wrap;

  .items {
    margin: 10px 10px 10px 0;
    width: 30%;
    border-radius: 10px;

    .icon {
      display: flex;

      .icon-title {
        color: #888;
        margin: auto 10px;
        font-weight: 550;
        font-size: 16px;
        max-width: 100px;
        overflow: hidden;

      }

      .btn {
        margin: auto 10px auto 0;
        text-align: center;
      }

    }

    .categorys {
      display: flex;
      flex-wrap: wrap;

      .category {
        margin: auto 5px;
      }
    }
  }
}


.card {
  border-radius: 20px;
  overflow: hidden;

  .card-d {
    display: flex;
    flex-direction: column;

    .title {
      border-bottom: 1px solid @bgColor;
      padding-bottom: 10px;
      color: #555;
    }

    .e-item {
      margin: 15px 0;
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: center;
      line-height: 30px;

      .n-select {
        width: 50%;
        margin: auto 10px;
      }

      .colorPicker {
        width: 50%;
        margin: auto 10px;
        display: flex;
        justify-content: center;
      }
    }

    .btndiv {
      margin: auto auto 50px auto;
      display: flex;
      justify-content: center;

      .btn {
        width: 100px;
      }
    }
  }

}

::v-deep(.n-card__content) {
  padding: 10px !important;
}

.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>